<template>
  <div>
    <!-- 头部 -->
    <header>
      <span @click="golast">
        <svg
          data-v-cec0c0c0=""
          width="100%"
          height="100%"
          xmlns="http://www.w3.org/2000/svg"
          version="1.1"
        >
          <polyline
            data-v-cec0c0c0=""
            points="12,18 4,9 12,0"
            style="fill: none; stroke: rgb(255, 255, 255); stroke-width: 2"
          ></polyline></svg
      ></span>
      <span>密码登录</span>
      <span></span>
    </header>
    <form action="">
      <div class="zhanghao">
        <input type="text" placeholder="账号" v-model="account" />
      </div>
      <div class="mima">
        <input :type="light" placeholder="密码" v-model="pass" />
      </div>
      <div class="yanzheng">
        <input type="text" placeholder="验证码" v-model="code" maxlength="4" />
      </div>
      <van-button type="primary" v-on:click.prevent="goNext"></van-button>
      <van-switch
        @click="qie"
        class="anniu"
        v-model="checked"
        active-color="#4cd964"
        inactive-color="#dcdee0"
      />
      <span>abc...</span>
      <p>登录</p>
      <section class="section">
        <img :src="ImgSrc" alt="" />
        <section @click="genghuan">
          <b>看不清</b>
          <strong>换一张</strong>
        </section>
      </section>
    </form>
  </div>
</template>
<script>
import { yanzheng, jianyan } from "../../API/index";
import Vue from "vue";
import { Switch } from "vant";
Vue.use(Switch);
import { Button } from "vant";
Vue.use(Button);
import { Dialog } from "vant";
// 全局注册
Vue.use(Dialog);
export default {
  data() {
    return {
      account: "",
      pass: "",
      code: "",
      checked: true,
      light: "password",
      ImgSrc: "",
    };
  },
  async beforeMount() {
    var res = await yanzheng();
    this.ImgSrc = res.data.code;
  },
  methods: {
    golast() {
      this.$router.go(-1);
    },
    qie() {
      this.checked = !this.checked;
      if (this.checked == false) {
        this.light = "password";
      } else {
        this.light = "text";
      }
    },
    async genghuan() {
      var res = await yanzheng();
      this.ImgSrc = res.data.code;
    },
    async goNext() {
      if (this.account == "") {
        Dialog.alert({
          message: "请输入手机号/邮箱/用户名",
        }).then(() => {});
      } else if (this.account != "" && this.pass == "") {
        Dialog.alert({
          message: "请输入密码",
        }).then(() => {
          // on close
        });
      } else if (this.account != "" && this.pass != "" && this.code == "") {
        Dialog.alert({
          message: "请输入验证码",
        }).then(() => {
          //   on close
        });
      } else if (this.account != "" && this.pass != "" && this.code != "") {
        var ma = await jianyan({
          captcha_code: this.code,
          password: this.pass,
          username: this.account,
        });
        if (ma.data.message != "验证码不正确") {
          localStorage.username = this.account;
          this.$router.push("/Myusername");
        } else {
          Dialog.alert({
            message: ma.data.message,
          }).then(() => {
            //   on close
          });
          this.account = " ";
          this.pass = "";
          this.code = "";
          var res = await yanzheng();
          this.ImgSrc = res.data.code;
        }
      }
      console.log(ma.data)
    },
  },
};
</script>
<style scoped>
.section {
  width: 10rem;
  position: absolute;
  right: 1rem;
  top: 11rem;
  display: flex;
  justify-content: space-between;
}
.section b,
strong {
  flex-wrap: nowrap;
  font-size: 0.5rem;
}
.section img {
  width: 6rem;
  height: 3rem;
}
.section section {
  height: 3rem;
  width: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.section b {
  color: #333;
}
strong {
  color: #3b95e9;
}
form p {
  left: 11rem;
  color: #fff;
  top: 16rem;
  position: absolute;
}

form span {
  position: absolute;
  top: 7.5rem;
  right: 2rem;
  color: #fff;
}
form {
  margin-top: 2.95rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 15rem;
}
form div {
  position: relative;
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #f1f1f1;
}
form div input {
  width: 90%;
  height: 3rem;
  font-size: 1rem;
  outline: none;
  border: none;
}
form .anniu {
  width: 3.7rem;
  height: 2rem;
  position: absolute;
  right: 1rem;
  top: 7rem;
}
form button {
  width: 90%;
}
body {
  background: #f5f5f5;
}
header {
  height: 2.95rem;
  border-bottom: 0.5rem solid #f5f5f5;
}
header svg {
  width: 1rem;
  height: 1rem;
}
header span {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
}
</style>
